<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .nav {
        width: 800px;
        height: 150px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .nav input {
        width: 600px;
        height: 60px;
    }

    .nav button {
        width: 200px;
        height: 60px;
        background-color: rgb(242, 183, 23);
        font-size: 18px;
        border: rgb(242, 183, 23);
        border-radius: 5px;
    }

    .nav button:active {
        background-color: gray;
    }

    .container {
        width: 800px;
        height: 200px;
        display: flex;
        margin: 0 auto;
    }

    h3 {
        width: 400px;
        height: 50px;
        background-color: black;
        color: white;
        text-align: center;
        line-height: 50px;
    }

    .row {
        width: 400px;
        height: 50px;
    }

    .row input,
    span {
        margin-left: 5px;
        line-height: 50px;
    }

    .row button {
        width: 50px;
        height: 30px;
        float: right;
        margin: 10px 20px auto auto;
    }
</style>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <input type="text"><button onclick="newJob()">新建任务</button>
    </div>

    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox">
                <span>吃饭<span> <button>删除</button>
            </div>
        </div>

        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>

</body>
<script>
    function newJob() {
        //获取到输入的信息
        let input = document.querySelector(".nav input");
        let input_info = input.value;
        if (input_info == "") {
            alert("新建任务不能为空!");
            return;
        }
        //获取到todo标签
        let todo = document.querySelector(".todo");
        //创建一个div
        let div = document.createElement("div");
        //创建input, span，button
        let checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        let span = document.createElement("span");
        span.innerHTML = input_info;
        let button = document.createElement("button");
        button.innerHTML = "删除";

        div.appendChild(checkbox)
        div.appendChild(span)
        div.appendChild(button)
        //更新样式
        div.className = "row";
        //将div放入todo
        todo.appendChild(div);

        let delete_buttons = document.querySelectorAll(".row button");
        for (i = 0; i < delete_buttons.length; i++) {
            delete_buttons[i].onclick = function () {
                let parent = this.parentNode;
                let grand_parent = parent.parentNode;
                grand_parent.removeChild(parent);
            }
        }

        let checkboxs = document.querySelectorAll(".row input");
        for (i = 0; i < checkboxs.length; i++) {
            checkboxs[i].onclick = function () {
                let row = this.parentNode;
                let target;
                if (this.checked == true) {
                    target = document.querySelector(".done");
                } else {
                    target = document.querySelector(".todo");
                }
                target.appendChild(row);
            }
        }
    }

</script>

</html>